import React, { Component } from "react";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { StoreDis, StoreItem } from "../../../utils/index";
import { useNavigate } from "react-router-dom";
import Tab from "../../../components/Tabs";
import DetailArticle from "../../../components/DetailArticle";
import DetailTab from "../../../components/DetailTab";
import RetTop from "../../../components/RetTop";
import { Anchor } from "antd";
type Props = {};

const HomeRightTabDetail = (props: Props) => {
  const location = useLocation().state;
  const navigate = useNavigate();
  const discth: StoreDis = useDispatch();
  //仓库获取数据
  const list = useSelector((store: any) => store.store.HomeRightListdata);
  console.log(list);
  return (
    <div className="HomeRightTabDetailDetail">
        <RetTop></RetTop>
      <div className="HomeRightTabDetailDetailLeft">
        <div className="top">
          <div>
            About <span>{location.label}</span> tag related articles
          </div>
          <div>
            Totally searched <span>{location.articleCount}</span> Count
          </div>
        </div>
        <div className="main">
          <h3>Tags</h3>
          {list &&
            list.map((item: any, index: number) => {
              return (
                <span key={index}>
                  {item.label}[{item.articleCount}]
                </span>
              );
            })}
        </div>
        <div className="footer"></div>
      </div>
      <div className="HomeRightTabDetailDetailRight">
      <Anchor offsetTop={20 }>
        <div className="righttop">
          <h3>Recommended Readings</h3>
          <DetailArticle></DetailArticle>
        </div>
        <div className="rightbom">
          <h3>Category</h3>
          <DetailTab></DetailTab>
        </div>
        </Anchor>
      </div>
    </div>
  );
};

export default HomeRightTabDetail;
